<template>
  <div class="col" :class="[type == 'unfull' ? 'felx0' : '', classname]">
    <div class="label">{{ label }}:</div>
    <div class="value"><slot /></div>
  </div>
</template>

<script>
export default {
  name: "devform",
  props: {
    label: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    classname: {
      type: String,
      default: "",
    },
  },
};
</script>

<style scoped lang="scss">
.row {
  display: flex;
}
.row-right {
  display: flex;
  justify-content: left;
}
.col {
  flex: auto;
  display: flex;
}
.label {
  display: inline-block;
  width: 160px;
  text-align: right;
  padding: 5px 5px;
  border: 1px solid $--color-border;
  background: $--color-labelbg;
  display: flex;
  align-items: center;
  justify-content: right;
}
.felx0 {
  flex: 0 0 auto;
  .value {
    width: 215px;
  }
}
.w2 {
  flex: none;
  width: 50%;
}
.w3 {
  flex: none;
  width: 33.3%;
}
.red-icon {
  color: red;
  margin-right: 2px;
  position: relative;
  top: 3px;
}
.value {
  display: inline-block;
  border: 1px solid $--color-border;
  padding: 5px 5px;
  flex: 1;
  display: flex;
  align-items: center;
}
.colfelx {
  border: 1px solid $--color-border;
  flex: 1;
}
.left {
  text-align: left;
}
</style>
